<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button id="btn" style="position: fixed; left: 100px; top: 100px">按钮</button>
<img style="display: none" src="img/8.jpg" height="700" width="700"/>

    <input type="text">

    <div style="width: 500px; height: 500px; border: solid 1px red;">

    </div>


</body>
<script>

    $("#btn").hover(function(){
        $("img").show();
    }, function(){
        $("img").hide();
    });

    $("div").mousemove(function(event){
        //相对于浏览器页面的坐标
        // console.log(event.clientX+ "::" + event.clientY);
        //元素的相对坐标
         console.log(event.offsetX+ "::" + event.offsetY);
    });

    $("input").keydown(function(event) {
        console.log(event);
    });



    // document.getElementById("btn").onclick =function() {
    //     alert('按钮被点击');
    // }
    //绑定事件
    $("#btn").click(function(){
        // alert('按钮被点击');
        //隐藏
        // $("img").hide();
        //显示
        // $("img").show();
        // 切换 隐藏与显示
        $("img").toggle();
    });

    //触发点击事件
    // $("#btn").click();

</script>
</html>